<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/frozen/frozen.min.css">
    <link rel="stylesheet" href="css/pSort_detail.css">

    <!--<script src="js/auto.js"></script>-->
    <title>地址添加</title>
</head>
<style>
    body{
        width:100%;
        height:100%;
        background:#fff;
        overflow:hidden;
    }
    *{
        margin:0;
        padding:0;
        list-style:none;
        text-decoration:none;
    }
    input,select{
        background:#fff;
    }

    /*.imgs{*/
    /*overflow-y:auto;*/
    /*}*/
    .file-box {
        display: inline-block;
        position: relative;
        float: left;
    }
    .file-box img {
        width:0.7rem;
        height:0.7rem;
    }
    #file {
        position: absolute;
        left: 0;
        top: 0;
        width:0.7rem;
        height:0.7rem;
        opacity: 0;
    }
    .auto_hidden {
        width:100%;
        position:absolute;
        display:none;
    }

    .auto_show {

        width:100%;
        height:1.4rem;
        background:#F4F8F9;
        overflow-y:auto;
        /*border:1px solid #000;*/
        font-size:0.22rem;
        line-height:0.18rem;
        /*color: #48A1FF;*/
        position:absolute;
        color:#000;
        /*z-index:9999; */
        /* 设置对象的层叠顺序 */

        display:block;

    }

    .auto_onmouseover{

        /*color:#ffffff;*/
        color: #48A1FF;
        /*background-color:highlight;*/
        background:#F4F8F9;
        width:100%;

    }

    .auto_onmouseout{

        /*color:#000000;*/
        /*color: #48A1FF;*/
        width:100%;
        background:#F4F8F9;
        margin-top:0.1rem;
    }

</style>

<body>

<header style="width:100%;height:0.66rem;background:#48A1FF;border-top:1px solid #48a1ff;">
    <a href="javascript:" onclick="window.history.go(-1);"><img src="img/left.png" alt="" style="width:0.09rem;height:0.16rem;float:left;display:block;margin-left:0.2rem;margin-top:0.25rem;"></a>
    <span style="display:block;width:1.61rem;height:0.28rem;margin-left:0.78rem;margin-top:0.19rem;float:left;color:#fff;font-family: PingFangSC-Medium;font-size:0.2rem;">ADDRESS INPUT</span>
    <!--<img class="close" src="img/close.png" alt="" style="width:0.16rem;height:0.16rem;display:block;float:right;margin-right:0.34rem;margin-top:0.33rem;">-->
</header>

<content>
    <ul style="width:90%;height:0.4rem;margin:0 auto;">
        <li style="float:left;width:30%;height:0.4rem;font-family: PingFangSC-Light;font-size:0.14rem;
color:#969B9E;line-height:0.4rem;">Country</li>
        <li style="float:left;width:30%;height:0.4rem;font-family: PingFangSC-Light;font-size:0.14rem;
color:#969B9E;line-height:0.4rem;margin-left:5%;">State</li>
        <li style="float:left;width:30%;height:0.4rem;font-family: PingFangSC-Light;font-size:0.14rem;
color:#969B9E;line-height:0.4rem;margin-left:5%;">City</li>
    </ul>


    <ul style="width:90%;height:0.4rem;margin:0 auto;">
        <li style="float:left;width:30%;height:0.4rem;border-bottom:0.01rem solid #D8D8D8;">
            <select name="" id="country" style="display:block;width:100%;height:0.35rem;outline:none;border:none;font-family: PingFangSC-Medium;
font-size:0.14rem;
color: #6A6C6D;">
                <option value="USA">USA</option>
            </select>

        </li>
        <li style="float:left;width:30%;height:0.4rem;margin-left:5%;border-bottom:0.01rem solid #D8D8D8;">
            <select name="" id="state" style="display:block;width:100%;height:0.35rem;outline:none;border:none;font-family: PingFangSC-Medium;
font-size:0.14rem;
color: #6A6C6D;">
                <option value="CA">CA</option>
            </select>

        </li>
        <li style="float:left;width:30%;height:0.4rem;margin-left:5%;border-bottom:0.01rem solid #D8D8D8;">
            <select name="" id="city" style="display:block;width:100%;height:0.35rem;outline:none;border:none;font-family: PingFangSC-Medium;
font-size:0.14rem;
color: #6A6C6D;">
                <option value="lrvine">lrvine</option>
            </select>

        </li>
    </ul>


    <div style="width:90%;height:1.2rem;margin:0 auto;margin-top:0.16rem;">
        <span style="display:block;font-family: PingFangSC-Light;font-size:0.14rem;color:#969B9E;">Address</span>
        <input type="text" style="display:block;width:100%;height:0.3rem;margin-top:0.1rem;opacity: 0.5;
font-family: PingFangSC-Medium;
font-size:0.14rem;
color: #6A6C6D;outline:none;border:none;"  placeholder="Street and number" class="address1">
        <!--<div class="auto_hidden" id="auto">&lt;!&ndash;自动完成 DIV&ndash;&gt;</div>-->
        <div style="width:100%;height:0.01rem;margin:0 auto;background:#d8d8d8;"></div>
        <input type="text" style="display:block;width:100%;height:0.3rem;margin-top:0.29rem;font-size:0.14rem;opacity:0.5;outline:none;border:none;font-family: PingFangSC-Medium;color:#6a6c6d;" placeholder="Apartment,suite,Unit,buliding,floor,ect." class="address2">
        <div style="width:100%;height:0.01rem;margin:0 auto;background:#d8d8d8;"></div>
    </div>

    <div style="width:90%;height:0.7rem;margin:0 auto;margin-top:0.16rem;border-bottom:1px solid #d8d8d8;">
        <span style="display:block;font-family: PingFangSC-Light;font-size:0.14rem;color:#969B9E;">Buliding Type</span>
        <select name="" id="buildingType" style="display:block;width:100%;height:0.3rem;margin-top:0.13rem;font-family: PingFangSC-Medium;
font-size:0.14rem;
color: #6A6C6D;outline:none;border:none;">
            <option value="Community">Community</option>
        </select>
    </div>

    <div style="width:90%;height:0.7rem;margin:0 auto;margin-top:0.16rem;border-bottom:1px solid #d8d8d8;">
        <span style="display:block;font-family: PingFangSC-Light;font-size:0.14rem;color:#969B9E;">Zip Code</span>
        <input type="text" style="display:block;width:100%;height:0.3rem;margin-top:0.13rem;font-family: PingFangSC-Medium;
font-size:0.14rem;
color: #6A6C6D;outline:none;border:none;" class="zipCode">
    </div>

    <div style="width:90%;height:0.7rem;margin:0 auto;margin-top:0.16rem;border-bottom:1px solid #d8d8d8;">
        <span style="display:block;font-family: PingFangSC-Light;font-size:0.14rem;color:#969B9E;">Company</span>
        <input type="text" style="display:block;width:100%;height:0.3rem;margin-top:0.18rem;font-family: PingFangSC-Medium;
font-size:0.14rem;
color: #6A6C6D;outline:none;border:none;" class="company">
    </div>
</content>



<form class="lucky-form" id="form" action="" enctype="multipart/form-data" style="display:block;width:100%;min-height:1rem;height:auto;">

    <div class="imgs" style="margin-left:0.2rem;"></div>
    <div class="file-box">
        <input multiple="multiple" capture="camera" id="file"  type="file"  accept="image/*"/>
        <img style="margin-left:0.15rem;" src="img/camara.png" alt=""/>
    </div>
</form>

<div style="width:100%;height:0.8rem;" class="">
    <img src="img/confirm.png" style="display:block;float:left;margin-left:1.56rem;width:0.7rem;height:0.7rem;" alt="" class="confirm">

    <img src="img/locate icon.png" style="display:block;float:left;margin-left:0.5rem;width:0.4rem;height:0.4rem;margin-top:0.2rem;" alt="" class="locatepng">
</div>








<!--地址遮罩-->
<div id="addresshade" style="width:90%;height:1.14rem;opacity: 0.9;
background: #828282;
border-radius:0.08rem;margin:auto;position:absolute;display:none;left:0;right:0;bottom:0;top:0;font-family: PingFangSC-Medium;
font-size:0.16rem;
color: #FFFFFF;line-height:1.14rem;text-align:center;">
Please input your Address
</div>


<!--邮编遮罩-->
<div id="zipshade" style="width:90%;height:1.14rem;opacity: 0.9;
background: #828282;
border-radius:0.08rem;margin:auto;position:absolute;display:none;left:0;right:0;bottom:0;top:0;font-family: PingFangSC-Medium;
font-size:0.16rem;
color: #FFFFFF;line-height:1.14rem;text-align:center;">
    Please input your zipCode
</div>


<!--公司遮罩-->
<div id="companyshade" style="width:90%;height:1.14rem;opacity: 0.9;
background: #828282;
border-radius:0.08rem;margin:auto;position:absolute;display:none;left:0;right:0;bottom:0;top:0;font-family: PingFangSC-Medium;
font-size:0.16rem;
color: #FFFFFF;line-height:1.14rem;text-align:center;">
    Please input your Company
</div>


<script src="jquery-1.10.2.js" type="text/javascript"></script>
<script src="js/commonscript.js"></script>
<script src="js/address.js"></script>


<script type="text/javascript">



	var files = [];        //存 multi files
	var filesmap = {};     //存文件名称
    window.addEventListener('load',function(){
        var btn = document.querySelector('#file');                   // 上传按钮
        var btnBox = document.querySelector('.file-box');            // 按钮容器
        var wrap   = document.querySelector('.imgs');                  // 图片容器

        // 绑定触发事件
        btn.addEventListener('change',function(){
            console.log("addUpload");
            var file = btn.files;
      
            for( var i = 0 ; i<file.length;i++ ){
            	//去重复
                console.log(file[i].name);
            	var filename = filesmap[file[i].name];
                console.log(filename);
            	if ($.trim(filename) == ''){

            		filesmap[file[i].name] = file[i].name;
            		files.push(file[i]);

            	}else {
            		continue;
            	}

                // 创建元素

                var div1 = document.createElement('div');
                var img = document.createElement('img');
                var close = document.createElement('img');
                div1.className = "one_img";
                close.className = 'del_img';
                close.src = "img/delete.png" ;
                close.style.width='0.14rem';
                close.style.height='0.14rem';
                var reader = new FileReader();
                reader.onload = (function(aImg){
                    return function(e){
                        aImg.src = e.target.result;
                    };
                })(img);
                reader.readAsDataURL(file[i]);

                // 绑定关闭图片事件
                close.addEventListener('click',function(){
                    var a = this ;
//						alertConfirm('确定要删除图片吗','云生活提示',function(){
                    wrap.removeChild(a.parentNode);
//						    btnBox.style.display = "block" ;
//						})
					//删除重复
                  	var index =  $(a).parents("one_img").index();
                  	files.splice(index-1, 1);
                  	file.splice(index-1, 1);
                });

                // 完成结构嵌套并添加至文档中
                div1.appendChild(img);
                div1.appendChild(close);
                wrap.appendChild(div1);

                // 释放空间
                div1 = null ;
                img = null ;
                close = null ;
            }
        });



        // 监听 DOM 结构变化事件
        wrap.addEventListener('DOMSubtreeModified',function(){
            var length = document.querySelectorAll('.one_img').length;
//                document.querySelector('.zhangshu').textContent = length;
            // 判断图片个数  等于4张时隐藏
//                var length = document.querySelectorAll('.one_img').length;
//            if ( length == 4 ) {
//                btnBox.style.display = 'none';
//            }
        });
    });


</script>



</body>
</html>